/*
辅助:
1,自动重置
2,给元素添加动画
*/

$(document).ready(function(){
	//手动重置页面元素
	$("#reset").click(function(){
		$("*").removeAttr("style");
		$("div[class=none]").css({"display":"none"}); 
	});
	//判断是否自动重置
	$("input[type=button]").click(function(){
		if($("#isreset").is(":checked")){
			$("#reset").click();
		}
	});

	/*
	//给id为mover的元素添加动画.
	function animateIt() {
		$("#mover").slideToggle("slow", animateIt);
	}
	animateIt();
	*/

	// ++++++++++++++++++++++++++++++ 一次性动画 +++++++++++++++++++++++++++
	// 一次性动画 只执行一次
	// animateItV1();
	function animateItV1() {
		$("#mover").slideUp('slow', function() {
			console.log('---------slideUp 完成--------------\n')
			setTimeout(() => {
				$(this).slideDown('slow', function() {
					console.log('---------slideDown 完成--------------\n')
				})
			},1000)
		})
	}


	// ++++++++++++++++++++++++++++++ 递归的调用自己 +++++++++++++++++++++++++++
	// animateItV2(1)
	function animateItV2(count) {
		$("#mover").slideUp('slow', function() {
			console.log('---------slideUp 完成--------------\n')
			setTimeout(() => {
				$(this).slideDown('slow', function() {
					console.log('---------slideDown 完成--------------\n')
					setTimeout(() => {
						animateItV2(count+1)
					}, 2000)
				})
			},1000)
		})
	}


	// ++++++++++++++++++++++++++++++ 向着通用的版本进行发展 +++++++++++++++++++++++++++
	
	// 不加var 变成全局变量
	var toggle = [ 
		{fn: 'slideDown', timeout:2000, text: '显示动画'}, 
		{fn: 'slideUp', timeout:1000, text: '隐藏动画'}
	];
	

	// setTimeout 嵌套了一模一样的代码, 需要优化一下
	// 
	// animateItV3(1);
	function animateItV3(count) {
		if(count >= 10) return ;
		// slideUp   --> slideDown
		// slideUp   --> slideDown
		// 每动画一轮， count++ 两次

		console.log('count = ' + count, toggle[count % 2]['timeout'], toggle[count % 2]['fn']) ;
		$("#mover")[toggle[count % 2]['fn']]('slow', function() {
			var timeout = toggle[count % 2]['timeout']
			console.log(`${count} ---- ${toggle[count % 2].text}完毕 ----`) ;
			setTimeout(() => {
				++count
				console.log('count = ' + count, toggle[count % 2]['timeout'], toggle[count % 2]['fn']) ;
				$(this)[toggle[count % 2]['fn']]('slow', function() {
					var timeout = toggle[count % 2]['timeout']
					console.log(`${count} ---- ${toggle[count % 2].text}完毕 ----`) ;
					setTimeout(() => {
						animateItV3(++count)
					}, timeout) 
				})
			},timeout)
		})
	}	



	//  剔除掉相同的代码 进行简化。。。。 
	// animateItV3_1(1)
	function animateItV3_1(count) {
		if(count >= 10) return ;
		// slideUp   --> slideDown
		// slideUp   --> slideDown
		// 每动画一轮， count++ 两次

		console.log('count = ' + count, toggle[count % 2]['timeout'], toggle[count % 2]['fn']) ;
		$("#mover")[toggle[count % 2]['fn']]('slow', function() {
			var timeout = toggle[count % 2]['timeout']
			console.log(`${count} ---- ${toggle[count % 2].text}完毕 ----`) ;
			setTimeout(() => {
				animateItV3_1(++count)
			},timeout)
		})
	}	


	// $("#mover")[toggle[count % 2]['fn']] ---> $("#mover").slideToggle
	// 进一步的简化
	// 
	animateItV3_2(1)
	function animateItV3_2(count) {
		if(count >= 10) return ;
		console.log('count = ' + count, toggle[count % 2]['timeout'], toggle[count % 2]['fn']) ;
		$("#mover").slideToggle('slow', function() {
			console.log(`${count} ---- ${toggle[count % 2].text}完毕 ----`) ;
			setTimeout(() => {
				animateItV3_2(++count)
			},2000)
		})
	}	


	// ++++++++++++++++++++++++++++++ 向着通用的版本进行发展 +++++++++++++++++++++++++++

	// animateItV4(1)
	function animateItV4(count) {
		console.log(`count = ${count}`)
		$("#mover").slideToggle("slow", function(){
			setTimeout(() => {
				animateItV4(count+1)
			}, 2000)
		})
	}

	// ++++++++++++++++++++++++++++++ setTimeout 的回调直接为 动画函数 +++++++++++++++++++++++++++

	// animateItV5(1)
	function animateItV5(count) {
		console.log(`count = ${count}`)
		$("#mover").slideToggle("slow", function(){
			// 没有包裹一层函数 没法传递参数
			setTimeout(animateItV5, 2000)
		})
	}
		// 没有包裹一层函数 没法控制动画间隔的时间

	// ++++++++++++++++++++++++++++++ 动画结束的回调直接为 动画函数 +++++++++++++++++++++++++++
	// animateItV6(1)
	function animateItV6(count) {
		console.log(`count = ${count}`)
		// 没有使用setTimeout 没法控制动画间隔的时间
		$("#mover").slideToggle("slow", function() {
			animateItV6(count+1)
		})
	}


	// ++++++++++++++++++++++++++++++ 动画结束的回调直接为 动画函数 最终精简的版本 +++++++++++++++++++++++++++
	// animateItV7(1)
	function animateItV7(count) {
		console.log(`count = ${count}`)
		// 没有包裹一层函数 没法没法传递参数count
		$("#mover").slideToggle("slow", animateItV7)
	}



	// $("#mover").slideToggle("slow")
	// $("#mover").slideToggle("slow")
	// $("#mover").slideToggle("slow")
	// $("#mover").slideToggle("slow")
})